<!-- Config Data-->
<template>
  <v-container>
    <v-row>
      <v-col>
        <v-banner icon="info" icon-color="info" :elevation="2" single-line>本页面采用行内编辑模式，直接点击即可修改！</v-banner>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-data-table
            class="elevation-2"
            :headers="tableHeaders"
            :items="tableItems"
            hide-default-footer
          >
          <template v-slot:top>
            <v-form ref="searchField">
            <v-container>
            <v-row>
              <v-col cols="12" sm="4">
                  <v-row no-gutters>
                    <v-col cols="12" sm="5">
                      <v-select
                      :items="searchFieldItems"
                      prepend-icon="text_fields"
                      label="搜索字段"
                      dense
                      v-model="tableSearchField.field"
                      hide-details></v-select>
                    </v-col>
                    <v-col cols="12" sm="7">
                      <v-text-field
                      dense
                      label="请输入搜索内容！"
                      hide-details
                      prepend-icon="search"
                      v-model="tableSearchField.keyword"></v-text-field>
                      </v-col>
                  </v-row>
              </v-col>
              <v-col cols="12" sm="6">
                <v-btn color="primary" @click="fetchData"><v-icon>search</v-icon>搜索</v-btn>
                <v-btn text @click="$refs.searchField.reset();fetchData()"><v-icon>refresh</v-icon>重置</v-btn>
              </v-col>
            </v-row>
            </v-container>
            </v-form>
          </template>
          <template v-slot:item.scope="props">
            <v-edit-dialog
                :return-value.sync="props.item.scope"
                @save="saveFunc(props.item)"
                @cancel="cancelFunc(props.item)"
                @open="openFunc(props.item)"
                @close="closeFunc(props.item)"
                persistent
                large
                cancel-text="取消"
                save-text="保存"
              > {{ props.item.scope }}
                <template v-slot:input>
                  <v-text-field
                    v-model="props.item.scope"
                    :rules="[max45chars]"
                    label="编辑"
                    single-line
                    autofocus
                    counter
                  ></v-text-field>
                </template>
            </v-edit-dialog>
          </template>
          <template v-slot:item.name="props">
            <v-edit-dialog
                :return-value.sync="props.item.name"
                @save="saveFunc(props.item)"
                @cancel="cancelFunc(props.item)"
                @open="openFunc(props.item)"
                @close="closeFunc(props.item)"
                persistent
                large
                cancel-text="取消"
                save-text="保存"
              > {{ props.item.name }}
                <template v-slot:input>
                  <v-text-field
                    v-model="props.item.name"
                    :rules="[max45chars]"
                    label="编辑"
                    single-line
                    autofocus
                    counter
                  ></v-text-field>
                </template>
            </v-edit-dialog>
          </template>
          <template v-slot:item.value="props">
            <v-edit-dialog
                :return-value.sync="props.item.value"
                @save="saveFunc(props.item)"
                @cancel="cancelFunc(props.item)"
                @open="openFunc(props.item)"
                @close="closeFunc(props.item)"
                persistent
                large
                cancel-text="取消"
                save-text="保存"
              > {{ props.item.value }}
                <template v-slot:input>
                  <v-text-field
                    v-model="props.item.value"
                    :rules="[max45chars]"
                    label="编辑"
                    single-line
                    autofocus
                    counter
                  ></v-text-field>
                </template>
            </v-edit-dialog>
          </template>
          <template v-slot:item.remark="props">
            <v-edit-dialog
                :return-value.sync="props.item.remark"
                @save="saveFunc(props.item)"
                @cancel="cancelFunc(props.item)"
                @open="openFunc(props.item)"
                @close="closeFunc(props.item)"
                persistent
                large
                cancel-text="取消"
                save-text="保存"
              > {{ props.item.remark }}
                <template v-slot:input>
                  <v-text-field
                    v-model="props.item.remark"
                    :rules="[max45chars]"
                    label="编辑"
                    single-line
                    autofocus
                    counter
                  ></v-text-field>
                </template>
            </v-edit-dialog>
          </template>
        </v-data-table>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import * as API from '@/api/admin/config.js'
export default {
  name: 'ConfigData',
  components: {},
  data: function () {
    return {
      tableItems: [],
      tableHeaders: [
        { text: 'ID', value: 'id', align: 'center' },
        { text: '范围(前缀)', value: 'scope', align: 'center' },
        { text: '名称', value: 'name', align: 'center' },
        { text: '值', value: 'value', align: 'center' },
        { text: '说明', value: 'remark', sortable: false, width: '118px', align: 'center' },
        { text: '时间', value: 'updatedAt', align: 'center' }
      ],
      tableSearchField: {
        field: '',
        keyword: ''
      },
      searchFieldItems: [
        { value: 'id', text: 'ID' },
        { value: 'scope', text: '范围(前缀)' },
        { value: 'name', text: '名称' },
        { value: 'value', text: '值' },
        { value: 'remark', text: '说明' }
      ],
      max45chars: v => v.length <= 45 || '输入太多内容!'
    }
  },
  created: function () {
    this.fetchData()
  },
  computed: {},
  methods: {
    fetchData() {
      API.fetchList({ search: this.tableSearchField }).then(res => {
        this.tableItems = res.data.data
      })
    },
    saveFunc: function(item) {
      API.updateOne(item).then(res => {
        this.$toasted.success(res.data)
      })
    },
    cancelFunc: function(item) {},
    closeFunc: function(item) {},
    openFunc: function(item) {}
  }
}
</script>
<style scoped>
</style>
